<template>
    <div class="bgm">
      <div >
        <el-card class="bgm-card" >
          <el-form   label-width="60px" class="demo-dynamic">
            
              <div class="userinput">
              <el-form-item  label="账号"   >
                
                <div class="useron">
                  
                   <el-input type="text"   v-model="username" placeholder="请输入用户名"></el-input>
                </div>
            </el-form-item>
              </div>
            <el-form-item  label="密码" >
              <div class="passon">
                <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="denglu">登录</el-button>
            </el-form-item>
          </el-form>
       </el-card>
      </div> 
    </div>
</template>

<script>
import axios from 'axios';

export default{
  data(){
    return {
      message:"你好",
      username:"",
      password:"",
  
     
    }
  },
  methods:{
    
   
    denglu(){
      fetch("http://localhost:8081/login", {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username: this.username, password: this.password })
      })

        .then(response => response.json())
      
  .then(data=>{
        if(data.success){
          alert("登录成功")
          localStorage.setItem("token",JSON.stringify(data.data))
          this.$router.push({path:'/main/wuliu'});
        }
        else{
          this.$notify({
            title:'警告',
            message:data.message,
            type:'warning'
          })
        }
      })


    
    }
  }
}
</script>


<style scoped>

.bgm {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-image: url("../assets/bgmimage.png");
  position: fixed;

  background-size: 100% 100%;
}
.bgm-card{
  height: 180px;
  margin-left: 620px;
  margin-top: 300px;
  width: 300px;
  background-color:snow;
}




</style>